<template>
  <div>
    <el-card>
      <!-- class="project-list-container" -->
      <div>
        <div class="list-h">
          <div>
            <el-button
              type="primary"
              v-auth="`/project/filings-add`"
              @click="handleAdd"
              class="add-option"
              >添加备案项目</el-button
            >
          </div>
          <el-form
            :inline="true"
            class="demo-form-inline"
            :model="formInline"
            ref="formRef"
            @submit.prevent
          >
            <el-form-item label="项目名称" prop="projectNameLike">
              <el-input
                v-model.trim="formInline.projectNameLike"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目编号" prop="projectCodeLike">
              <el-input
                v-model.trim="formInline.projectCodeLike"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属公司主体" prop="principalCompanyCodeIn">
              <el-select v-model="formInline.principalCompanyCodeIn">
                <el-option label="华润啤酒" value="1,2,3,4,5,6" />
                <el-option label="华润雪花" value="2" />
                <el-option label="华润酒业" value="3,4,5,6" />
              </el-select>
            </el-form-item>

            <el-form-item label="项目类型" prop="projectTypeCode">
              <el-select
                v-model="formInline.projectTypeCode"
                clearable
                class="width-custom120"
              >
                <el-option
                  v-for="item in projectTypeArr"
                  :key="item.dicCode"
                  :label="item.dicValue"
                  :value="item.dicCode"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker
                class="width-custom220"
                v-model="createTime"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="handleChangeDate"
              />
            </el-form-item>

            <el-form-item>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          >
            <template #empty>
              <el-empty :image-size="150" description="暂无数据"></el-empty>
            </template>
            <el-table-column type="index" label="序号" width="60">
              <template v-slot="scope">
                <span>{{
                  (formInline.pageNum - 1) * formInline.pageSize +
                  scope.$index +
                  1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="projectCode"
              label="项目编号"
            ></el-table-column>
            <el-table-column
              prop="projectName"
              label="项目名称"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="projectTypeName"
              label="项目类型"
            ></el-table-column>

            <el-table-column
              prop="createUserName"
              label="创建人"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              :min-width="120"
            ></el-table-column>

            <el-table-column prop="" label="审批状态">
              <template #default="{ row }">
                {{ formatterStatusType(row) }}
              </template>
            </el-table-column>

            <el-table-column label="操作" width="240" fixed="right">
              <template #default="{ row }">
                <el-button
                  type="text"
                  v-if="row.projectApproveStatus !== '1'"
                  @click="handleLook(row)"
                  >查看
                </el-button>
                <el-button v-else type="text" @click="handleEdit(row, 'edit')"
                  >编辑</el-button
                >
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除该条记录吗？"
                  @confirm="handleDelete(row)"
                >
                  <template #reference>
                    <el-button v-auth="`/project/filings-del`" type="text"
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-skeleton>
      </div>
      <re-pagination
        :total="total"
        v-show="total > 0"
        v-model:page="formInline.pageNum"
        v-model:limit="formInline.pageSize"
        @pagination="handleSearch"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
import { postProjectDelete, postProjectList } from "/@/api/project";
import { postDictList } from "/@/api/common";
import { useRouter } from "vue-router";
import { ProjectStatusMap2 } from "../types";
import NotifMessage from "/@/utils/message/notification";
import { cloneDeep } from "lodash-es";
export default defineComponent({
  name: "UserManage",
  components: {},
  setup() {
    const router = useRouter();
    const formRef = ref<HTMLFormElement | null>(null) as any;

    let loading = ref<boolean>(false);
    let projectStep = ref<Array<any>>([]);
    let total = ref<number>(0);
    let formInline = reactive<any>({
      principalCompanyCodeIn: "1,2,3,4,5,6",
      isFilings: "2",
      projectNameLike: "",
      projectCodeLike: "",
      createUserNameLike: "",
      projectTypeCode: "",
      stageStatusUpper: "0",
      documentName: "",
      documentType: "",
      achievementType: "",
      expertName: "",
      costName: "",
      createTimeStrStart: "",
      createTimeStrEnd: "",
      // stageStatus: "0",
      flowStatus: "",
      pageSize: 10,
      pageNum: 1
    });

    let state = reactive({
      projectId: "",
      createTime: "",
      stages: ["建档 ", "可研", "立项", "实施", "验收", "后评价", "项目已结束"],
      target: null,
      tableData: []
    });

    let projectTypeArr = ref([]);
    const handleChangeDate = time => {
      formInline.createTimeStrStart = time[0];
      formInline.createTimeStrEnd = time[1];
    };

    async function getTableData() {
      loading.value = true;
      try {
        let copyParams = cloneDeep(formInline);
        copyParams.principalCompanyCodeIn =
          copyParams.principalCompanyCodeIn.split(",");
        const { code, data } = await postProjectList(copyParams);
        if (code === 200) {
          state.tableData = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    }

    const initProjectTypeList = async () => {
      try {
        const params = {
          dicType: "rd_project_type"
        };
        const { code, data } = await postDictList(params);
        if (code === 200) {
          projectTypeArr.value = data;
        }
      } catch (err) {
        console.log(err);
      }
    };

    // 清除表单，重置
    const handleReset = () => {
      formRef.value.resetFields();
      formInline.documentName = "";
      formInline.documentType = "";
      formInline.achievementType = "";
      formInline.expertName = "";
      formInline.costName = "";
      formInline.createTimeStrStart = "";
      formInline.createTimeStrEnd = "";
      state.createTime = "";
    };

    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData();
    };

    // 删除记录
    const handleDelete = async item => {
      console.log(item, "删除了");
      try {
        const { code, message } = await postProjectDelete({ id: item.id });
        if (code === 200) {
          NotifMessage.success(`${message}`);
          getTableData();
        } else {
          NotifMessage.error(`${message}`);
        }
      } catch (err) {
        console.log(err);
      }
    };

    // 创建项目
    const handleAdd = (): void => {
      router.push({ path: "/project/filings/detail", query: { mode: "add" } });
    };

    // 项目详情
    const handleLook = (row): void => {
      router.push({
        path: "/project/filings/detail",
        query: {
          id: row.id,
          mode: "look",
          flowId: row.flowId,
          taskId: row.curTaskId,
          instanceId: row.instanceId,
          nodeId: row.nodeStatusJdCode,
          isSkipYs: row.isSkipYs
        }
      });
    };

    const handleEdit = (row, type): void => {
      const cantype = row.canProcess === 1 && row.saveStatus === "3" ? 1 : 2;
      router.push({
        path: "/project/filings/detail",
        query: { id: row.id, mode: type, cantype }
      });
    };

    const formatterStatusType = row => {
      if (row.stageStatus === "6") {
        return "已审核";
      } else {
        return ProjectStatusMap2.get(row.projectApproveStatus);
      }
    };

    const initProjectStageList = async () => {
      try {
        const params = {
          dicType: "rd_project_stage"
        };
        const { code, data } = await postDictList(params);
        if (code === 200) {
          projectStep.value = data;

          // projectStage.value = projectStep.value.map(el => el.dicCode);
        }
      } catch (err) {
        console.log(err);
      }
    };

    // 请求数据
    initProjectStageList();
    getTableData();
    initProjectTypeList();
    return {
      handleChangeDate,
      projectStep,
      projectTypeArr,
      loading,
      formInline,
      formRef,
      total,
      ...toRefs(state),
      handleAdd,
      handleReset,
      handleSearch,
      handleDelete,
      handleLook,
      handleEdit,
      formatterStatusType
    };
  }
});
</script>
